<template>
  <div id="main" v-loading="loading">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" class="margin-t10">
      <el-breadcrumb-item class="font-w6 pointer">
        <a @click="handleCardChange">{{ fatherName }}</a>
      </el-breadcrumb-item>
      <el-breadcrumb-item>{{ "认证审核" }}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card margin-t20">
      <div v-if="itemInfo"> 
        <div class="dialogItem">
          <span>用户信息</span>
        </div>
        
        <el-form
          class="padding-r35"
          label-width="100px"
          label-position="left"
          :model="itemInfo"
          ref="userInfo"
        >
          <el-form-item label="用户:" class="wid-4" prop="userName">
            <el-input v-model="itemInfo.userName" disabled></el-input>
          </el-form-item>
          <el-form-item label="用户id:" class="wid-4" prop="userName">
            <el-input v-model="itemInfo.userId" disabled></el-input>
          </el-form-item>
          <el-form-item label="手机号:" class="wid-4" prop="phonenumber">
            <el-input v-model="itemInfo.phonenumber"></el-input>
          </el-form-item>
          <el-form-item label="收款码:" class="wid-4" prop="receivingCode">
            {{ itemInfo.receivingCode }}
          </el-form-item>
          <!-- <el-form-item label="性别:" class="wid-4" prop="sex">
            <el-radio-group v-model="itemInfo.sex">
              <el-radio label="0">男</el-radio>
              <el-radio label="1">女</el-radio>
            </el-radio-group>
          </el-form-item> -->
          <el-form-item label="邮箱:" class="wid-4" prop="email">
            <el-input v-model="itemInfo.email"></el-input>
          </el-form-item>
          <!-- <el-form-item label="账户名称:" class="wid-4" prop="bankAccountName">
            <el-input v-model="itemInfo.bankAccountName"></el-input>
          </el-form-item> -->
          <!-- <el-form-item label="银行账号:" class="wid-4" prop="bankCardNumber">
            <el-input v-model="itemInfo.bankCardNumber"></el-input>
          </el-form-item>
          <el-form-item label="开户行名称:" class="wid-4" prop="bankName">
            <el-input v-model="itemInfo.bankName"></el-input>
          </el-form-item> -->

          <el-form-item class="wid-4"> </el-form-item>
          <el-form-item class="wid-8 aline-c">
            <el-button type="primary" @click="referU" :disabled="disabledU">
              更新信息
            </el-button>
            <el-button @click="handleCardChange"> 返回 </el-button>
          </el-form-item>
        </el-form>
        <el-divider></el-divider>
      </div>

      <div v-if="approve"> 
        <div class="dialogItem">
          <span>企业认证</span>
        </div>
        <el-form
          class="padding-r35 margin-t10"
          label-width="120px"
          label-position="left"
          :model="approve"
          ref="approve"
        >
          <el-form-item
            label="执照类型"
            prop="businessLicenseType"
            class="wid-9"
          >
            <el-radio-group v-model="approve.businessLicenseType" disabled>
              <el-radio label="0">香港营业执照</el-radio>
              <el-radio label="1">大陆营业执照</el-radio>
              <el-radio label="2">海外营业执照</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="企业中文名称"
            class="wid-9"
            prop="enterpriseNameCn"
          >
            <el-input v-model="approve.enterpriseNameCn" disabled></el-input>
          </el-form-item>
          <el-form-item
            label="企业英文名称"
            class="wid-9"
            prop="enterpriseNameEn"
          >
            <el-input v-model="approve.enterpriseNameEn" disabled></el-input>
          </el-form-item>
          <el-form-item label="是否为上市公司" prop="isMarket" class="wid-9">
            <el-radio-group v-model="approve.isMarket" disabled>
              <el-radio label="0">是</el-radio>
              <el-radio label="1">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div class="box-card margin-t10"> 
          <div class="dialogItem" style="margin-bottom: 20px;">
            <span>实名认证</span>
          </div>
          <el-row type="flex" justify="space-around" class="aline-c box_sm">
            <div v-for="item in tabsData" :key="item.id">
              <img
                class="img_sm"
                v-if="item.id != 1"
                :src="isAcive > item.id || item.id == isAcive ? isImg : Img"
                alt=""
              />
              <div
                :class="[
                  isAcive > item.id || item.id == isAcive ? 'smActive' : '',
                  'bor_sm',
                  'pointer',
                ]"
                @click="toNum(item.id)"
              >
                <div class="rad_sm">{{ item.id }}</div>
                <div>
                  {{ item.name }}
                </div>
              </div>
            </div>
          </el-row>
          <el-form
            class="padding-r35 margin-t10"
            label-width="140px"
            label-position="left"
            :model="approve"
            ref="approve"
          >
            <div v-if="isAcive == 1">
              <el-form-item
                label="营业执照"
                class="wid-4 margin-b35 margin-t35 aline-c"
                prop="businessLicensePic"
              >
                <el-image
                  v-if="approve.businessLicensePic"
                  :src="
                    baseURL +
                    `/profile` +
                    approve.businessLicensePic.fileStoragePath
                  "
                  :preview-src-list="[
                    baseURL +
                      `/profile` +
                      approve.businessLicensePic.fileStoragePath,
                  ]"
                ></el-image>
              </el-form-item>

              <el-form-item
                label="公司类型"
                prop="enterpriseType"
                class="wid-9"
              >
                <el-radio-group v-model="approve.enterpriseType" disabled>
                  <el-radio label="0">有限责任公司</el-radio>
                  <el-radio label="1">个体工商户</el-radio>
                  <el-radio label="2">个人独资企业</el-radio>
                  <el-radio label="3">合伙企业</el-radio>
                  <el-radio label="4">股份有限公司</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                label="企业注册地"
                prop="registeredAddress"
                class="wid-7 select10"
              >
                <el-select
                  size="small"
                  v-model="approve.registeredAddress"
                  placeholder="请选择企业注册地"
                  filterable
                  disabled
                >
                  <el-option
                    v-for="type in nation"
                    :label="type.label"
                    :value="type.value"
                    :key="type.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="注册地址详情"
                prop="registeredAddressInfo"
                class="wid-7"
              >
                <el-input
                  size="small"
                  v-model="approve.registeredAddressInfo"
                  auto-complete="off"
                  placeholder="请输入注册地址详情"
                  disabled
                ></el-input>
              </el-form-item>
              <el-form-item
                label="注册地邮政编码"
                prop="registeredAddressZipCode"
                class="wid-7"
              >
                <el-input
                  size="small"
                  v-model="approve.registeredAddressZipCode"
                  auto-complete="off"
                  placeholder="请输入注册地邮政编码"
                  disabled
                ></el-input>
              </el-form-item>
              <el-form-item
                label="实际经营地址"
                prop="manageAddress"
                class="wid-7 select10"
              >
                <el-select
                  size="small"
                  v-model="approve.manageAddress"
                  placeholder="请选择实际经营地址"
                  filterable
                  disabled
                >
                  <el-option
                    v-for="type in nation"
                    :label="type.label"
                    :value="type.value"
                    :key="type.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="实际经营地址详情"
                prop="manageAddressInfo"
                class="wid-7"
              >
                <el-input
                  size="small"
                  v-model="approve.manageAddressInfo"
                  auto-complete="off"
                  placeholder="请输入实际经营地址详情"
                  disabled
                ></el-input>
              </el-form-item>
              <el-form-item
                label="雇员人数"
                prop="employeeNumber"
                class="wid-7"
              >
                <el-input
                  size="small"
                  v-model="approve.employeeNumber"
                  auto-complete="off"
                  placeholder="请输入雇员人数"
                  disabled
                ></el-input>
              </el-form-item>
              <el-form-item
                label="经营场所类型"
                prop="operationType"
                class="wid-7"
              >
                <el-input
                  size="small"
                  v-model="approve.operationType"
                  auto-complete="off"
                  placeholder="请输入经营场所类型"
                  disabled
                ></el-input>
              </el-form-item>
            </div>
            <div v-if="isAcive == 2">
              <el-form-item label="您的身份" prop="identityType" class="wid-9">
                <el-radio-group v-model="approve.identityType" disabled>
                  <el-radio label="0">企业法人代表</el-radio>
                  <el-radio label="1">被授权人</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                label="国籍"
                prop="nationality"
                class="wid-7 select10"
              >
                <el-select
                  size="small"
                  v-model="approve.nationality"
                  placeholder="请选择国籍"
                  filterable
                  disabled
                >
                  <el-option
                    v-for="type in nation"
                    :label="type.label"
                    :value="type.value"
                    :key="type.value"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item
                label="证件类型"
                prop="certificateType"
                class="wid-9"
              >
                <el-radio-group v-model="approve.certificateType" disabled>
                  <el-radio label="0">身份证</el-radio>
                  <el-radio label="1">护照</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item
                label="身份证正面"
                class="wid-4 margin-b35 margin-t35 aline-c"
                prop="certificateFrontPic"
                v-if="approve.certificateType == 0"
              >
                <el-image
                  v-if="approve.certificateFrontPic"
                  :src="
                    baseURL +
                    `/profile` +
                    approve.certificateFrontPic.fileStoragePath
                  "
                  :preview-src-list="[
                    baseURL +
                      `/profile` +
                      approve.certificateFrontPic.fileStoragePath,
                  ]"
                ></el-image>
              </el-form-item>

              <el-form-item
                label="身份证反面"
                class="wid-4 margin-b35 margin-t35 aline-c"
                prop="certificateReversePic"
                v-if="approve.certificateType == 0"
              >
                <el-image
                  v-if="approve.certificateReversePic"
                  :src="
                    baseURL +
                    `/profile` +
                    approve.certificateReversePic.fileStoragePath
                  "
                  :preview-src-list="[
                    baseURL +
                      `/profile` +
                      approve.certificateReversePic.fileStoragePath,
                  ]"
                ></el-image>
              </el-form-item>

              <el-form-item
                label="法代护照照片"
                class="wid-4 margin-b35 margin-t35 aline-c"
                prop="certificatePassportPic"
                v-if="approve.certificateType == 1"
              >
                <el-image
                  v-if="approve.certificatePassportPic"
                  :src="
                    baseURL +
                    `/profile` +
                    approve.certificatePassportPic.fileStoragePath
                  "
                  :preview-src-list="[
                    baseURL +
                      `/profile` +
                      approve.certificatePassportPic.fileStoragePath,
                  ]"
                ></el-image>
              </el-form-item>

              <el-form-item
                label="证件姓名"
                prop="certificateName"
                class="wid-7"
              >
                <el-input
                  size="small"
                  v-model="approve.certificateName"
                  auto-complete="off"
                  placeholder="请输入证件姓名"
                  disabled
                ></el-input>
              </el-form-item>
              <el-form-item
                label="证件号码"
                prop="certificateNumber"
                class="wid-7"
              >
                <el-input
                  size="small"
                  v-model="approve.certificateNumber"
                  auto-complete="off"
                  placeholder="请输入证件号码"
                  disabled
                ></el-input>
              </el-form-item>
              <el-form-item label="手机号" prop="phone" class="wid-7">
                <el-input
                  size="small"
                  v-model="approve.phone"
                  auto-complete="off"
                  placeholder="请输入手机号"
                  disabled
                ></el-input>
              </el-form-item>
              <el-form-item label="邮箱" prop="email" class="wid-7">
                <el-input
                  size="small"
                  v-model="approve.email"
                  auto-complete="off"
                  placeholder="请输入邮箱"
                  disabled
                ></el-input>
              </el-form-item>
            </div>
            <div v-if="isAcive == 3">
              <el-form-item class="wid-7 aline-l">
                <div class="margin-l155 font12">
                  根据所适用法律规定，我们需向责公司收集受益所有人信息。
                </div>
                <div class="margin-l155 font-w6">
                  受益所有人：实际管控、管理公司并享有公司最终收益的自然人。具体是指，直接或间接通过股权、授权或其他形式法律安排拥有公司25%以上股权、投票权的自然人。
                </div>
              </el-form-item>
              <el-form-item class="wid-7 aline-l">
                <div class="margin-l155 font18 font-w6">
                  1、法人代表【xxx】是否为受益所有人？
                </div>
                <el-radio-group
                  v-model="approve.legalIsBeneficiary"
                  class="margin-l155"
                  disabled
                >
                  <el-radio label="0">是</el-radio>
                  <el-radio label="1">否</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item class="wid-7 aline-l">
                <div class="margin-l155 font18 font-w6">
                  2、贵公司是否存在其他受益所有人？
                </div>
                <el-radio-group
                  v-model="approve.isExistOtherBeneficiary"
                  class="margin-l155"
                  disabled
                >
                  <el-radio label="0">是</el-radio>
                  <el-radio label="1">否</el-radio>
                </el-radio-group>

                <i class="el-icon-warning-outline font12 text-gray">
                  {{ "若持股比例<25%，则非受益所有人" }}
                </i>
              </el-form-item>

              <el-form-item
                label="身份证正面"
                class="wid-4 margin-b35 margin-t35 aline-c"
                prop="beneficiaryCardFrontPic"
                v-if="approve.isExistOtherBeneficiary == 0"
              >
                <el-image
                  v-if="approve.beneficiaryCardFrontPic"
                  :src="
                    baseURL +
                    `/profile` +
                    approve.beneficiaryCardFrontPic.fileStoragePath
                  "
                  :preview-src-list="[
                    baseURL +
                      `/profile` +
                      approve.beneficiaryCardFrontPic.fileStoragePath,
                  ]"
                ></el-image>
              </el-form-item>

              <el-form-item
                label="身份证反面"
                class="wid-4 margin-b35 margin-t35 aline-c"
                prop="beneficiaryCardReversePic"
                v-if="approve.isExistOtherBeneficiary == 0"
              >
                <el-image
                  v-if="approve.beneficiaryCardReversePic"
                  :src="
                    baseURL +
                    `/profile` +
                    approve.beneficiaryCardReversePic.fileStoragePath
                  "
                  :preview-src-list="[
                    baseURL +
                      `/profile` +
                      approve.beneficiaryCardReversePic.fileStoragePath,
                  ]"
                ></el-image>
              </el-form-item>

              <el-form-item
                label="手持身份证"
                class="wid-4 margin-b35 margin-t35 aline-c"
                prop="beneficiaryHandPic"
                v-if="approve.isExistOtherBeneficiary == 0"
              >
                <el-image
                  v-if="approve.beneficiaryHandPic"
                  :src="
                    baseURL +
                    `/profile` +
                    approve.beneficiaryHandPic.fileStoragePath
                  "
                  :preview-src-list="[
                    baseURL +
                      `/profile` +
                      approve.beneficiaryHandPic.fileStoragePath,
                  ]"
                ></el-image>
              </el-form-item>

              <el-form-item
                label="证件姓名"
                prop="beneficiaryName"
                class="wid-7"
                v-if="approve.isExistOtherBeneficiary == 0"
              >
                <el-input
                  size="small"
                  v-model="approve.beneficiaryName"
                  auto-complete="off"
                  placeholder="请输入证件姓名"
                  disabled
                ></el-input>
              </el-form-item>
              <el-form-item
                label="证件号码"
                prop="beneficiaryNumber"
                class="wid-7"
                v-if="approve.isExistOtherBeneficiary == 0"
              >
                <el-input
                  size="small"
                  v-model="approve.beneficiaryNumber"
                  auto-complete="off"
                  placeholder="请输入证件号码"
                  disabled
                ></el-input>
              </el-form-item>
            </div>
            <div v-if="isAcive == 4">
              <h3 class="aline-c font20 font-w6">
                为确认开户为法人代表本人意愿，请上传法人代表手持[身份证]照片
              </h3>
              <el-form-item
                label="手持身份证"
                class="wid-4 margin-b35 margin-t35 aline-c"
                prop="lawGenerationHandPic"
              >
                <el-image
                  v-if="approve.lawGenerationHandPic"
                  :src="
                    baseURL +
                    `/profile` +
                    approve.lawGenerationHandPic.fileStoragePath
                  "
                  :preview-src-list="[
                    baseURL +
                      `/profile` +
                      approve.lawGenerationHandPic.fileStoragePath,
                  ]"
                ></el-image>
              </el-form-item>
            </div>

            <el-form-item class="wid-8 aline-c margin-t35">
              <el-button type="primary" @click="AddCom(-1)" v-if="isAcive != 1">
                上一步
              </el-button>
              <el-button type="primary" @click="AddCom(1)" v-if="isAcive != 4">
                下一步
              </el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- <el-divider></el-divider>  -->
        <div class="dialogItem" style="margin-bottom:20px">
          <span>认证审核</span>
        </div>
        <el-form
          class="padding-r35"
          label-width="100px"
          label-position="left"
          :model="authRecord"
          ref="authRecord"
        >
          <el-form-item label="审核备注:" class="wid-5" prop="auditResult">
            <el-input
              type="textarea"
              :rows="5"
              v-model.trim="authRecord.auditResult"
            ></el-input>
          </el-form-item>

          <el-form-item class="wid-4"> </el-form-item>
          <el-form-item class="wid-8 aline-c">
            <el-button
              type="primary"
              :disabled="disabled"
              @click="refer(1)"
              v-if="approve.status == 0"
            >
              通过
            </el-button>
            <el-button
              type="danger"
              :disabled="disabled"
              @click="refer(2)"
              v-if="approve.status == 0"
            >
              驳回
            </el-button>
            <el-button
              type="danger"
              @click="handleCardChange"
              v-if="approve.status == 2"
            >
              已驳回，等待重新提交信息
            </el-button>
            <el-button @click="handleCardChange" v-if="approve.status != 2">
              返回
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <codeChoose ref="codeRef" :fromType="verType" @setParam="getParam" ></codeChoose>
  </div>
</template>
<script>
import { mapState, mapGetters } from "vuex";
import codeChoose from '@/components/codeChoose.vue'
import {
  setStoreS,
  getStoreS,
  removeStoreS,
  insertCharacter,
  spStr,
} from "../../utils/util";
import {
  baseURL,
  req,
  reqJson,
  encrypt,
  decrypt,
  reqtoken,
  reqField,
  getUrl,
  service,
} from "../../api/axiosFun";
import isImg from "../../assets/img/isArr.png";
import Img from "../../assets/img/arr.png";
import { nation } from "../../utils/cardData";
export default {
  name: "userItem",
  props: ["uitemInfo", "isUser", "approveInfo", "fatherName"],
  data() {
    return {
      userItem: this.isUser,
      itemInfo: this.uitemInfo,
      userInfo: "",
      baseURL: baseURL,
      loading: false,
      disabled: false,
      disabledU: false,
      approve: this.approveInfo,
      authRecord: {
        id: "",
        auditResult: "",
        status: "",
        userId: "",
      },
      isAcive: 1,
      tabsData: [
        { id: 1, name: "填写企业基本信息" },
        { id: 2, name: "填写企业法人代表信息" },
        { id: 3, name: "填写受益所有人信息" },
        { id: 4, name: "法人代表意愿确认" },
      ],
      isImg: isImg,
      Img: Img,
      nation: nation,
      verArry:[],
      verType:'',
      curItem:'', 
      userInfo: null,
      fd:''
    };
  },
  created() {
    if (this.approve) {
      this.authRecord.auditResult = this.approve.auditResult;
    } else {
      this.companyInfo();
    }
  },
  components: { 
    codeChoose
  },
  computed: {
    ...mapGetters(["getUser"]),
    ...mapGetters(["getcInfo"]),
  },
  watch: {
    getUser(newVal) {
      this.userInfo = JSON.parse(newVal);
    },
  },
  methods: {
    toNum(id) {
      this.isAcive = id;
    },
    AddCom(num) {
      this.isAcive = this.isAcive + num;
    },
    companyInfo() {
      req(
        "get",
        "/api/admin/getAuthRecordKycList?pageNum=1&pageSize=10&userId=" +
          this.itemInfo.userId,
        {}
      )
        .then((res) => {
          if (res.code == 0) {
            if (res.rows.length > 0) {
              this.approve = res.rows[0];
              this.authRecord.auditResult = this.approve.auditResult;
            }
          } else {
            this.$message({
              type: "info",
              message: res.msg,
            });
          }
        })
        .catch((err) => {
          this.$message.error(spStr(err, "PhotonPay", ""));
        });
    },

    getParam(val,type){  
      this.headers = val ;
      if(type == 'referU'){
        this.referUShowPwd();
      }else{ 
        this.editSaveAuth() 
      }
      
    },  
    editSaveAuth(){ 
      let parm = {
        id: this.approve.id,
        userId: this.approve.userId,
        status: this.fd,
        type: 2,
        remark: this.authRecord.auditResult,
      };
      let url = getUrl(parm);
        reqJson('post',"/api/admin/verifyAuthRecordKyc" + url, {},{
          headers:{
            ...this.headers
          }
        })  
        // service
        // .post("/api/admin/verifyAuthRecordKyc" + url, {})
        .then((res) => {
          if (res.code == 0) {
            this.disabled = false;
            this.handleCardChange();
          } else if (res.code == 500) {
            this.$message.error(res.msg);
            return;
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error(spStr(err, "PhotonPay", ""));
        });

    }, 

    refer(s) {
      this.disabled = true; 
        this.fd = s
        if(this.userInfo&&this.userInfo.verifyApi){ 
          this.verArry =  this.userInfo.verifyApi.split(',');
          if(this.verArry.includes('/api/admin/verifyAuthRecordKyc')){
            this.$refs.codeRef.openDialog(); 
          }else{
            this.editSaveAuth();
          }
        }else{
           this.editSaveAuth();
        } 
    },
    handleCardChange() {
      this.userItem = true;
      this.$emit("changUser", this.userItem);
    },

 
    referUShowPwd(){ 

      reqJson('post',"/api/admin/editSensitiveInfo/"+this.itemInfo.userId,{   
        // bankAccountName:this.itemInfo.bankAccountName,
        // bankCardNumber:this.itemInfo.bankCardNumber,
        // bankName:this.itemInfo.bankName,
        // userName:this.itemInfo.userName,
        // sex:this.itemInfo.sex, 
        email:this.itemInfo.email,
        phonenumber:this.itemInfo.phonenumber
      },{
          headers:{
            ...this.headers
          }
        })   
        
      // service
      //     .post("/api/photon/editUserInfo", this.userInfo)
        .then((res) => {
          this.disabledU = false;
          if (res.code == 0) {
            this.$message({
              type: "success",
              message: res.msg,
            });
            // this.getInfo();
          } else {
            // this.userInfo.password = "";
            this.$message({
              type: "info",
              message: res.msg,
            });
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },

    referU() {
      this.$refs.userInfo.validate((valid) => {
        if (!valid) return;
        this.verType = 'referU'
        this.$refs.codeRef.openDialog(); 
        this.disabledU = true;  
       
        // service
        //   .post(
        //     "/api/photon/editUserInfo/" + this.itemInfo.userId,
        //     this.itemInfo
        //   )
        //   .then((res) => {
        //     this.disabledU = false;
        //     if (res.code == 0) {
        //       this.$message({
        //         type: "success",
        //         message: res.msg,
        //       });
        //     } else {
        //       this.userInfo.password = "";
        //       this.$message({
        //         type: "info",
        //         message: res.msg,
        //       });
        //     }
        //   })
        //   .catch((err) => {
        //     this.$message.error(err);
        //   });
      });
    },
  },
};
</script>

<style scoped>
#main .box-card .el-form-item {
  display: inline-block;
  margin-left: 5%;
}
.box-card h2 {
  margin: 0;
}
.box-card .item .item-name {
  font-size: 35px;
  line-height: 80px;
}
.box-card .item .item-ts {
  font-size: 14px;
  font-weight: 500;
  color: #949494;
}

.select10 .el-select,
.select10 .el-input {
  width: 100%;
}
.box_sm {
  width: 80%;
  margin: auto;
}
.img_sm {
  width: 30px;
  margin-right: 20px;
  display: inline-block;
}
.bor_sm {
  display: inline-block;
  width: 230px;
  padding: 20px 0;
  color: #000;
  border-radius: 10px;
  border: 1px solid #353535;
}
.smActive {
  background-color: #f7ddbd;
  border-color: #e3b85a;
  color: #e3b85a;
}
.rad_sm {
  width: 25px;
  height: 25px;
  line-height: 25px;
  margin: 0px auto 10px;
  font-weight: 600;
  text-align: center;
  color: #fff;
  background-color: #000;
  border-radius: 50%;
}

.smActive .rad_sm {
  background-color: #e3b85a;
}

.el-upload .avatar {
  /* margin-left: -15px;
  margin-top: -15px; */
  /* width: 180px;
  height: 180px; */
  width: 100%;
  height: 100%;
  display: block;
}
/deep/.el-upload-dragger,
.el-upload img {
  width: 360px;
  height: 215px !important;
}
.el-image {
  /* margin-top: 20px; */
  width: 360px;
  height: 215px;
}
</style>
